<template>
  <div class="page">
    <Card
      :isOperate="isOperate"
      v-if="cardShow"
      @close="cardShow = false"
      @submitAction="submitAction"
      :isAdd="isAdd"
      :rowData="rowData"
    ></Card>
    <div class="top-bar">
      <el-input placeholder="请输入内容" v-model="inputValue">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </el-input>
      <el-button type="primary" class="addbtn" @click="showAddCard"
        >添加用户</el-button
      >
    </div>
    <el-table :data="tableData" v-loading="loading" border>
      <el-table-column type="index" label="#" width="50"> </el-table-column>
      <el-table-column prop="username" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="userpwd" label="密码" width="180">
      </el-table-column>
      <el-table-column prop="status" label="身份"> </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot:default="scope">
          <div class="btns">
            <el-button type="primary" @click="handleUpdate(scope)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="danger" @click="handleDelete(scope)">
              <i class="el-icon-delete"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagi"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="Currentchange"
    >
    </el-pagination>
  </div>
</template>

<script>
import Card from "@/components/carduser.vue";
import {
  gettotaluser,
  getlistuser,
  deleteuser,
  getvalueuser,
  updateuser,
  adduser,
} from "@/api/school.js";
export default {
  name: "manageuser",

  data() {
    return {
      tableData: [
        {
          username: "aaa",
          userpwd: 123,
          status: "普通用户",
        },
      ],
      page: {
        size: 10,
        current: 1,
      },
      total: 0,
      loading: false,
      title: "添加用户",
      cardShow: false,
      isAdd: true,
      rowData: {},
      isOperate: false,
      inputValue: "",
    };
  },
  methods: {
    // data为当前页的页数
    Currentchange(data) {
      this.page.current = data;
      this.getList(this.page.current);
    },
    initData() {
      this.getList(this.page.current);
      this.getTotal();
    },
    showAddCard() {
      this.isAdd = true;
      this.cardShow = true;
    },
    // info是对象，里面有isAdd和rowData
    submitAction(info) {
      // 添加或修改项目
      this.isOperate = true;
      if (info.isAdd) {
        adduser(info.rowData).then(() => {
          this.initData();
          this.cardShow = false;
          this.isOperate = false;
          this.$message({
            message: "添加成功！",
            type: "success",
            customClass: "v-message",
            offset: 100,
          });
        });
      } else {
        updateuser(info.rowData).then(() => {
          console.log(info.rowData);
          this.initData();
          this.cardShow = false;
          this.isOperate = false;
          this.$message({
            message: "修改成功！",
            type: "success",
            customClass: "v-message",
            offset: 100,
          });
        });
      }
    },
    handleSearch() {
      if (this.inputValue === "") {
        this.getList(1);
        return;
      }
      console.log(this.inputValue);

      this.loading = true;
      getvalueuser(this.inputValue).then((res) => {
        console.log(this.inputValue);
        this.loading = false;
        this.tableData = res.data.result;
        // this.total = res.data.total;
      });
    },
    handleUpdate(scope) {
      this.isAdd = false;
      this.cardShow = true;
      this.rowData = scope.row;
      console.log("update");
    },
    handleDelete(scope) {
      console.log("111");
      this.$confirm("你确定要删除这一条数据吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger",
      })
        .then(() => {
          deleteuser(scope.row.id).then((res) => {
            this.initData();
            this.$message({
              message: "删除成功！",
              type: "success",
              customClass: "v-message",
              offset: 100,
            });
          });
        })
        .catch((err) => err);
    },
    getList(current) {
      this.loading = true;
      getlistuser(current).then((res) => {
        this.tableData = res.data.result;
        this.loading = false;
        document.querySelector(".page").scrollTop = 0;
      });
    },
    getTotal() {
      gettotaluser().then((res) => {
        // total指有多少条数值
        this.total = res.data.result;
      });
    },
  },
  created() {
    // // 一进浏览器，还没点左边的导航栏，就先执行initData()
    this.initData();
  },
  components: {
    Card: Card,
  },
};
</script>

<style lang="less" scoped>
.top-bar {
  .el-input {
    width: 250px;
  }
  .addbtn {
    margin-left: 15px;
  }
}
.page {
  height: 100%;
  overflow-y: scroll;
}
.el-table {
  transform: translateY(15px);
}
.pagi {
  margin: 30px 0;
  text-align: center;
}
.v-message {
  left: 58%;
}
</style>